<template>
    <div class="warpper-box">
        <form-create 
        v-model="params.fApi" 
        :rule="params.rule" 
        :option="params.option" 
        @btn-search-click="loadTable(true)"
        @btn-reset-click="reset"/>
        <a-button type="danger" v-action:smsAddBtn @click="add(true)" icon="plus">新增</a-button>
        <a-table :columns="table.columns" :pagination="table.pagination" @change="handleTableChange" rowKey="id" :data-source="table.loadData">
          <span slot="tempStatus" slot-scope="text, record">
            <a-popconfirm
                :title="record.tempStatus === 1 ? '禁用状态，模板不能使用？确认禁用！':'确认启用！'"
                ok-text="确认"
                cancel-text="取消"
                @confirm="handelTempStatusChange(record)" >
                 <a-switch checked-children="启用" un-checked-children="禁用" 
                :checked="record.tempStatus === 1 ? true : false"
                default-checked />
            </a-popconfirm>
          </span>
          <span slot="action" slot-scope="text, record">
            <a @click="add(record)">详情</a>
            <a-divider v-action:smsDelBtn type="vertical" />
            <a-popconfirm
                title="是否删除?"
                ok-text="删除"
                cancel-text="取消"
                @confirm="del(record)">
              <a href="#" v-action:smsDelBtn>删除</a>
            </a-popconfirm>
          </span>
        </a-table>
         <a-modal :title="form.title" :width="640" :visible="form.visible" @ok="handleSubmit" @cancel="form.visible=false">
            <form-create v-model="form.fApi" :rule="form.rule" :option="form.option"/>
        </a-modal>
    </div>
</template>

<script>
import store from '@/store'
import { 
  getSysSmsList,
  getSysSmsEnable,
  getSysSmsDel,
  getSysSmsEdit,
  getSysSmsAdd
} from '@/api/manage/sms'
import {PARAMS_SMS,FORM_SMS,SMS_COLUMNS,OPTION_BLOCK,OPTION_INLINE} from './modules/form'
export default {
  name: 'sms',
  data () {
    return {
        params:{
          fApi:{},
          rule:PARAMS_SMS,
          option:OPTION_INLINE
        },
        form:{
          title:'新增',
           visible:false,
          fApi:{},
          rule:[],
          option:OPTION_BLOCK
        },
        table:{
          columns:SMS_COLUMNS,
          loadData:[],
          pagination:{
            pageNum:1,
            pageSize: 10,
            total:0,
            showSizeChanger: true,
					showQuickJumper: true,
            pageSizeOptions: ["10", "20", "50", "100"],
            showTotal: total => `共有 ${total} 条数据`,
          }
        },
        parkOptions:[]
    }
  },
  created () {
    this.loadTable(true);
    this.ininParkData();
    
  },
  methods: {
    async ininParkData(){
       this.parkOptions = await store.dispatch('getSysAllParkEnable');
    },
    async loadTable(flag){
      let params = {};
      if(JSON.stringify(this.params.fApi) !== "{}"){
        params.parkName = this.params.fApi.getValue('parkName');
        params.signName = this.params.fApi.getValue('signName');
      }
      if(flag){
        this.table.pagination.pageNum = 1;
        this.table.pagination.pageSize = 10;
      }
      params.pageNum = this.table.pagination.pageNum;
      params.pageSize = this.table.pagination.pageSize;
      const {code,data} = await getSysSmsList(params);
      if(code ==='1'){
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination){
      this.table.pagination.pageNum = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    add(rows){
      this.form.rule = FORM_SMS;
      this.$nextTick(()=>{
        this.form.fApi.updateRules({'parkId':{options:this.parkOptions}})
      });
      if(rows === true){
        
        this.form.title="新增";
        this.$nextTick(()=>{
          this.form.fApi.disabled(false);
            this.form.fApi.resetFields();
        })
      }else{
        this.form.title="详情";
        this.$nextTick(()=>{
          this.form.fApi.disabled(true);
            this.form.fApi.setValue({
                parkId:rows.parkId,
                appId:rows.appId,
                signName:rows.signName,
                tempName:rows.tempName,
                appName:rows.appName,
                tempType:rows.tempType,
                tempContent:rows.tempContent
            })
        })
      }
      this.form.visible = true;
    },
    handleSubmit(){
      this.form.fApi.submit(async (formData, $f) => {
        try {
          const {code} = await getSysSmsAdd(formData);
          if(code === '1'){
            this.form.visible = false;
            this.loadTable(true);
          }
        } catch (error) {
          this.$message.info(JSON.stringify(error));
        }
      })
    },
    async del(row){
      let params = {id:row.id};
      const {code} = await getSysSmsDel(params);
      if(code === '1'){
        this.$message.success('操作成功');
        this.loadTable(false);
      }
    },
    async handelTempStatusChange(el){
      const tempStatus = el.tempStatus === 1 ? 2:1;
      let params = {
        tempStatus:tempStatus,
        id:el.id
      }
      const {code} = await getSysSmsEnable(params);
      if(code === '1'){
        this.$message.success('操作成功');
        this.loadTable(false);
      }
    },
    reset(){
      this.params.fApi.resetFields();
      this.loadTable(true);
    }
  }
}
</script>


